{extend name="$index_style_layout" /}

<!--SEO相关-->
{block name="head_title"}{$webdb.mseo_title?:$webdb.seo_title}{/block}
{block name="head_keword"}{$webdb.mseo_keyword?:$webdb.seo_keyword}{/block}
{block name="head_description"}{$webdb.mseo_description?:$webdb.seo_description}{/block}

{block name="body_content"}


<link rel="stylesheet" href="/public/static/bbs/list.css">
<div class="MainContainer">
<!-- 栏目列表 -->
{include file="scroll_sort" /}
	<div class="Container">
		<div class="LeftCnt"> 
			<dl class="BaseInfo">
				<dt>今日<span id="div_today_post">0</span>帖 昨日<span id="div_yesterday_post">0</span>帖  最高日<span id="div_max_post">0</span>帖 </dt>
{if modules_config('appstore')}
				<dd class="count_setup">今日<span id="div_today_setup">0</span>次 昨日<span id="div_yesterday_setup">0</span>次  本周<span id="div_week1_setup">0</span>次 上周<span id="div_week2_setup">0</span>次  安装统计<i class="fa fa-hand-o-left"></i></dd>
<style type="text/css">
	.count_setup span{color:blue;padding-left:2px;padding-right:2px;}
</style>
<script type="text/javascript">
$(function(){
	var url = "{:urls('appstore/wxapp.api/total')}?type=";
	$.get(url+"day1",function(res){
		if(res.code==0){
			$("#div_today_setup").html(res.data);
		}
	});
	$.get(url+"day2",function(res){
		if(res.code==0){
			$("#div_yesterday_setup").html(res.data);
		}
	});
	$.get(url+"week1",function(res){
		if(res.code==0){
			$("#div_week1_setup").html(res.data);
		}
	});
	$.get(url+"week2",function(res){
		if(res.code==0){
			$("#div_week2_setup").html(res.data);
		}
	});
})
</script> 
{else /}
<dd>社区主页<i class="fa fa-pagelines"></i></dd>
{/if}
			</dl>  
			<div class="ListBox">
				<div class="head">
					<span onclick="listbbs(0,'list')" class="ck">最新回复</span>
					<span onclick="listbbs(1,'id')">最新帖子</span>
					<span onclick="listbbs(2,'status')">推荐帖子</span>
					<span onclick="listbbs(3,'view')">热门帖子</span>					 
				</div>
				<div class="ShowLists">
<style>
    .play_voice {
        display: inline-block;
        height: 30px;
        line-height: 40px;
        text-align: center;
        position: relative;
        vertical-align: bottom;
    }

    .play_voice span {
        display: inline-block;
        width: 3px;
        margin-bottom: 0;
        background-color: blue;
        margin-right: -12px;
    }

    .play_voice .line1 {
        /*alternate意为应该轮流反向播放动画*/
        animation: line 0.6s infinite ease-in-out alternate;
    }

    .play_voice .line2 {
        animation: line 0.6s 0.2s infinite ease-in-out alternate;
    }

    .play_voice .line3 {
        animation: line 0.6s 0.4s infinite ease-in-out alternate;
    }

    .play_voice .line4 {
        animation: line 0.6s 0.6s infinite ease-in-out alternate;
    }

    @keyframs line {
        from {
            height: 0;
        }
        to {
            height: 20px;
        }
    }

    @-webkit-keyframes line {
        from {
            height: 0;
        }
        to {
            height: 20px;
        }
    }
</style>
			<div class="pc_live_video">
			{qb:tag name="pc_live_video" js="pc_live_video" class="plugins\alilive\index\Index@label"}
					<ul class="list">
						<li class="icon"><a href="{:get_url('user',$rs.uid)}" target="_blank"><img src="{$rs.uid|get_user_icon}" onerror="this.src='__STATIC__/images/nobody.gif'"></a></li>
						<li class="info">
							<div class="title"><i class="fa fa-video-camera" style="font-size:16px;color:orange;"></i> <a target="_blank" href="{:murl('member/msg/index')}?uid=-{$rs.id}">{$rs.uid|get_user_name} 正在 {$rs.title} 进行视频直播</a>
							</div>
							<div class="more"><a href="{:get_url('user',$rs.uid)}" target="_blank">{$rs.uid|get_user_name}</a> <span><i class="fa fa-clock-o"></i>直播开始时间:  {$rs.start_time|format_time=true}</span></div>
						</li>	
						<li>
							<div class="play_voice">
								<span class="line1"></span>
								<span class="line2"></span>
								<span class="line3"></span>
								<span class="line4"></span>
							</div>
						</li>
					</ul>
		{/qb:tag}
		</div>

		<!--在线人数活跃圈子开始-->
		<div class="list_qun_num" style="display:none;">
					<ul class="list" v-for="rs in listdb">
						<li class="icon"><a :href="'/index.php/qun/show-'+rs.id+'.html'" target="_blank" style="border-radius: 5px;"><img style="border-radius: 5px;" :src="rs.picurl" onerror="this.src='__STATIC__/images/nopic.png'"></a></li>
						<li class="info">
							<div class="title"><i class="glyphicon glyphicon-fire" style="font-size:16px;color:orange;"></i> <a target="_blank" :href="'/member.php/member/msg/index.html?uid=-'+rs.id">{{rs.title}} 有<b style="color:red;">{{rs.num}}</b>人在线</a>
							</div>
							<div class="more">圈主:<a :href="'/member.php/home/'+rs.uid+'.html'" target="_blank">{{rs.username}}</a> <span><i class="fa fa-clock-o"></i>活跃时间:{{rs.time}} <i class="fa fa-fw fa-user-o"></i>会员总数:  {{rs.usernum}} 位</span></div>
						</li>
						<li>
							<div class="play_voice">
								<span class="line1"></span>
								<span class="line2"></span>
								<span class="line3"></span>
								<span class="line4"></span>
							</div>
						</li>
					</ul>
		</div>
<script src="__STATIC__/js/core/vue.js"></script>
<script type="text/javascript">
var vues = new Vue({
	el: '.list_qun_num',
	data: {
		listdb: [],
	},
	watch:{
      listdb: function() {
        this.$nextTick(function(){	//数据渲染完毕才执行
			$('.list_qun_num').show();
        })
      }
    },
	methods: {
		add_data:function(array,ar){
			array.forEach((rs)=>{
				ar.forEach((qs)=>{
					if(qs.id==rs.id){
						rs.time = qs.time;
						rs.num = qs.num;
					}
				})
				this.listdb.push(rs);
			});			
		}
	}		  
});

var w_s = new WebSocket("{:fun('Gatewayclient@client_url')}");
w_s.onmessage = function(e){
	var obj = {};
	try {
		obj = JSON.parse(e.data);
	}catch(err){
		console.log(err);
	}
	if(obj.type=='connect'){
		w_s.send('{"type":"get_qun_num","url":"'+window.location.href+'"}');
	}else if(obj.type=='qun-num'){
		var ar = [];
		obj.qun.forEach((rs)=>{
			ar.push(rs.id);
		});
		$.post("{:urls('qun/wxapp.qun/getbyids')}",{'ids':ar.join(',')},function(res){
			if(res.code==0){
				vues.add_data(res.data,obj.qun);
			}
		});		
	}
}
</script>
<!--在线人数活跃圈子结束-->

<!--name是标签名，跟通用标签不能重名，rows取几条数据,order按什么方式排序，list代表可控排序，id即时间,view代表浏览量-->
		{qb:listpage name="bbs_list_page_pc" status="1" rows="20" order="list"}
					<ul class="list">
						<li class="icon"><a href="{:get_url('user',['uid'=>$rs['uid']])}" target="_blank"><img src="{:get_user_icon($rs['uid'])}" onerror="this.src='__STATIC__/images/nobody.gif'" ></a></li>
						<li class="info">
							<div class="title"><a target="_blank" href="{:urls('content/show',['id'=>$rs['id']])}">{$rs.title}</a>
							{if $rs.list>time()}<span class="top">顶</span>{/if} {eq name="rs.status" value="2"}<span class="com">精</span>{/eq} {gt name="rs.view" value="200"}<span class="hot">热</span>{/gt}  {if (time()-$rs.create_time<3600*24)}<span class="hot">新</span> {/if}</div>
							<div class="more"><a href="{:get_url('user',['uid'=>$rs['uid']])}" target="_blank">{$rs.username}</a> <span><i class="fa fa-clock-o"></i>{$rs.create_time|format_time=true} <i class="fa fa-fw fa-user-o"></i>回复: {$rs.replyuser} {$rs.update_time|format_time=true}</span></div>
						</li>
						<li class="hits"><i class="si si-eye"></i>{$rs.view}</li>
						<li class="reply"><i class="fa fa-commenting-o"></i>{$rs.replynum}</li>
					</ul>
		{/qb:listpage} 
				</div><!--{$pages} 这是传统分页-->
				<div class="ShowMoreBBs"><button type="button" onclick="ShowMoreBBs()">查看更多</button></div>
			</div>
		</div>
		<div class="RightCnt">
			<div class="RightSide">
				<dl class="RightBase">
					<dt>
						<a href="{:urls('content/add')}"><button type="button">发表新贴</button></a>
						 <ul><ol><span>主题 </span><em id="div_total_topic">00</em></ol> <li><span>帖子 </span><em id="div_total_post">00</em></li></ul>
						<div>共 <span id="div_total_member">20</span> 位会员 欢迎新会员 <a href="#" id="div_new_member">xxx</a></div> 
					</dt>
<script type="text/javascript">
$(function(){
	var today_post = 0;
	var yesterday_post = 0;
	var total_post = 0;
	var total_topic = 0;
	var day_top_post = 0;
	var total_member = 1;
	var new_member = '';
	$.get("{:urls('wxapp.infomsg/index')}",function(res){
		if(res.code==0){
			today_post = res.data.today_post;
			yesterday_post = res.data.yesterday_post;
			total_post = res.data.total_post;
			total_topic = res.data.total_topic;
			day_top_post = res.data.day_top_post;
		}
		$("#div_today_post").html(today_post);
		$("#div_yesterday_post").html(yesterday_post);
		$("#div_total_topic").html(total_topic);
		$("#div_total_post").html(total_post);
		$("#div_max_post").html(day_top_post);
		
	});

	$.get("{:urls('index/wxapp.member/get_list',['rows'=>1])}",function(res){
		if(res.code==0){
			new_member = res.data[0].username;
			total_member = res.paginate.total;
		}
		$("#div_total_member").html(total_member);
		$("#div_new_member").html(new_member);
	});

});

</script>
				</dl>


				<div class="SideMores">
					<div class="h"><span>精彩内容</span></div>
					<ul class="ListNewfen pc_indexpage">
{qb:tag name="pc_indexpage" js="pc_indexpage" type="bbs" order="status" rows="8"}
						<li><a href="{$rs.url}">{$rs.title}</a></li>
{/qb:tag}
					</ul>
					<div class="MOreShow msnewfen"><button type="button" onclick="MoreShowNewfen('{qb:url name='pc_indexpage' /}')">更多<i class="fa fa-chevron-down"></i></button></div>
				</div>
<script type="text/javascript">
var M_s_page = 1;
function MoreShowNewfen(url){
	M_s_page++;
	$.get(url+M_s_page,function(res){
		if(res.code==0){
			if(res.data==''){
				layer.msg("已经显示完了！",{time:500});
				$('.msnewfen').hide();
			}else{
				$('.ListNewfen').append(res.data);
			}
		}else{
			layer.msg(res.msg,{time:2500});
		}
	});
}
</script>

				<div class="SideMores">
					<div class="h"><span>活跃__QUN__</span></div>
					<ul class="ListMember pc_qun_list_member">
{qb:tag name="pc_qun_list_member" order="list" js="pc_qun_list_member" type="qun" rows="6"}
						<li><a href="{$rs.url}" target="_blank" title="{$rs.content|get_word=200}"><span><img src="{$rs.picurl}" onerror="this.src='__STATIC__/images/nopic.png'"  onmouseover="changeShowImg($(this),'over');" onmouseout="changeShowImg($(this),'out');" ></span><em>{$rs.title}</em></a></li>
{/qb:tag}

					</ul>
					<script type="text/javascript">
						function changeShowImg(obj,mouse){
							if(mouse=='over'){
								obj.animate({"width":"150%","height":"150%"},300);
							}else if(mouse=='out'){
								obj.animate({"width":"100%","height":"100%"},300);
							}
						}
					</script>
					<div class="MOreShow"><button class="showMoreShop" type="button" onclick="showMoreMember('{qb:url name='pc_qun_list_member'/}')">更多<i class="fa fa-chevron-down"></i></button></div>
				</div>
<script type="text/javascript">
var shoppage=1;
function showMoreMember(url){	
	shoppage++;
	$.get(url+shoppage,function(res){
		if(res.code==0){
			if(res.data==''){
				layer.msg("已经显示完了！",{time:500});
				$('.showMoreShop').attr('onclick','');
				$('.showMoreShop').html('显示完了');
				$('.showMoreShop').css({'background':'#CCC'});
			}else{
				res.data="<div class='pages"+shoppage+"'>"+res.data+"</div>";			
				$('.ListMember').append(res.data);
				$('.ListMember .pages'+shoppage).hide();
				$('.ListMember .pages'+shoppage).show(500);
			}
		}else{
			layer.msg(res.msg,{time:2500});
		}
	});
}
</script>				
				<dl class="RightBase" style="margin-top:20px;">
					<dd>
						<div class="h"><span>热门分类</span></div>
						<ul>
{volist name="0|sort_config" id="rs"}
							<li><a href="{:urls('content/index',['fid'=>$rs['id']])}" {eq name="$fid" value="$rs.id"}class="ck"{/eq}>{$rs.name}</a></li>
{/volist}
						</ul>
					</dd>
				</dl>

				<div class="SideMores">
					<div class="h"><span>友情链接</span></div>
					<ul class="FriendLink">
						{qb:tag name="pc_bbsindex_link"}
						<li><a href="http://www.qibomb.com" target="_blank">齐博模板网</a></li>
						<li><a href="http://www.qibomoban.com" target="_blank">齐博模板堂</a></li>
						<li><a href="http://www.admin5.net/" target="_blank">A5站长网</a></li>
						<li><a href="http://www.im286.com/" target="_blank">落伍者</a></li>
						<li><a href="http://www.qibosoft.com" target="_blank">齐博软件</a></li>
						<li><a href="http://www.chinaccnet.com/" target="_blank">中电云集</a></li>
						{/qb:tag}
					</ul>
				</div>
				<dl class="WXcode">
					<dt>扫一扫访问手机版</dt>
					<dd>
					<img src="{:get_qrcode(get_url('location'))}"/>
					</dd>
				</dl>
			</div>
		</div>
	</div>
</div>
<div class="topUpCont">
    <ul>
    	<ol><i class="fa fa-angle-double-up"></i></ol>
        <li>回到顶部</li>
    </ul>
</div>

<script type="text/javascript">
var Mpage=1;
var byorder='list';
var showmorebbs='<button type="button" onclick="ShowMoreBBs()">查看更多</button>';
function ShowMoreBBs(){
	Mpage++;
	$('.ShowMoreBBs').html('内容加载中……');
	$.get('{qb:list_url name="bbs_list_page_pc" /}'+Mpage+'&order='+byorder+'&'+Math.random(),function(res){
		if(res.code==0){
			if(res.data==''){
				layer.msg("已经显示完了！",{time:500});
				$('.ShowMoreBBs').html('');
			}else{				
				$('.ShowLists').append("<span class='Mpage"+Mpage+"'></span>");
				$('.Mpage'+Mpage).hide();
				$('.Mpage'+Mpage).html(res.data);
				$('.Mpage'+Mpage).fadeIn();
				$('.ShowMoreBBs').html(showmorebbs);
				scroll_get = true;
			}
		}else{
			layer.msg(res.msg,{time:2500});
		}
	});
}

//滚动显示更多
var scroll_get = true;	//做个标志,不要反反复复的加载
$(document).ready(function () {
	$(window).scroll(function () {
		if (scroll_get==true &&  (400 + $(window).scrollTop())>($(document).height() - $(window).height())) {
			scroll_get = false;
			layer.msg('内容加截中,请稍候',{time:1000});
			ShowMoreBBs();
		}
	});
});


function listbbs(num,order){
	Mpage=1;
	byorder=order;
	$('.ListBox .head span').removeClass('ck');
	$('.ListBox .head span').eq(num).addClass('ck');
	$.get('{qb:list_url name="bbs_list_page_pc" /}'+Mpage+'&order='+byorder+'&'+Math.random(),function(res){
		if(res.code==0){
			if(res.data==''){
				layer.msg("没有相应的帖子！",{time:500});
				$('.ShowLists').html('');
				$('.ShowMoreBBs').html('');
			}else{
				$('.ShowLists').html("<span class='Mpage"+Mpage+"'></span>");
				$('.Mpage'+Mpage).hide();
				$('.Mpage'+Mpage).html(res.data);
				$('.Mpage'+Mpage).fadeIn();
				$('.ShowMoreBBs').html(showmorebbs);
			}
		}else{
			layer.msg(res.msg,{time:2500});
		}
	});
}
$(document).ready(function () {	
	var rightBoxH = $('.RightSide').height();	//右边页面的高度	
	var headBoxH = $('.RightBase').offset().top;	//元素距离网页顶部的距离
	$(window).scroll(function () {
		var scroll_Height = $(window).scrollTop(); //页面滚动的高度距离
		if(scroll_Height>rightBoxH+headBoxH){
			$('.RightBase').addClass('RightBase1'); //让右边漂浮起来
			var thistopH = scroll_Height-headBoxH;	//靠在页面的顶部
			$(".RightBase").css({'top':thistopH+'px'});
		}else{
			$('.RightBase').removeClass('RightBase1');
		}
		if (scroll_Height > 100) {
			$(".topUpCont").show();
		} else {
			$(".topUpCont").hide();
		}		
	});
	$(".topUpCont").click(function () {
		$("html,body").animate({scrollTop:0},500);
	});
});	

</script>
{/block}